<template>
    <div class="my-main-box">
      <el-card>
        <div class="my-header-box">
          <img :src="header_image" alt="" class="my-header-img">
          <span class="my-header-username">{{nickname}}</span>
       </div>
      </el-card>

      <el-card class="my-card" :body-style="{padding:'20px 0'}">
          <ul class="my-card-ul">
            <li class="my-card-li" @click="switchLogin('/homePage')">
              <i class="iconfont icon-zhuye"></i>
              <span class="my-card-li-title">我的主页</span>
              <i class="el-icon-arrow-right"></i>
            </li>
            <li class="my-card-li" @click="switchLogin('/album')">
              <i class="iconfont icon-xiangce"></i>
              <span class="my-card-li-title">我的相册</span>
              <i class="el-icon-arrow-right"></i>
            </li>
            <li class="my-card-li" @click="switchLogin('/follow')">
              <i class="iconfont icon-guanzhu"></i>
              <span class="my-card-li-title">我的关注</span>
              <i class="el-icon-arrow-right"></i>
            </li>
            <li class="my-card-li" @click="switchLogin('/collection')">
              <i class="iconfont icon-collection-b"></i>
              <span class="my-card-li-title">我的收藏</span>
              <i class="el-icon-arrow-right"></i>
            </li>
            <li class="my-card-li" @click="switchLogin('/praise')">
              <i class="iconfont icon-favour-full"></i>
              <span class="my-card-li-title">我的点赞</span>
              <i class="el-icon-arrow-right"></i>
            </li>
            <li class="my-card-li" @click="switchLogin('/settings')">
              <i class="iconfont icon-shezhi"></i>
              <span class="my-card-li-title">设置</span>
              <i class="el-icon-arrow-right"></i>
            </li>
            <li class="my-card-li"  @click="loginOut">
              <i class="iconfont icon-tuichu"></i>
              <span class="my-card-li-title">退出</span>
              <i class="el-icon-arrow-right"></i>
            </li>
          </ul>
      </el-card>
    </div>
</template>

<script>
  import {mapState,mapMutations} from 'vuex'
  import Cookies from 'js-cookie'

  export default {
    name: "index",
    data(){
      return{
        info:{}
      }
    },
    computed:{
      ...mapState('user', {
        nickname: state => state.nickname,
        header_image: state => state.header_image,
      }),
    },
    methods:{
      ...mapMutations('user', [
        'SET_token'
      ]),
      loginOut(){    //退出登录
          Cookies.remove('token');
          this.SET_token(null);
          this.$router.push('/');
      },
      switchLogin(value){     //判断是否登录
        if(Cookies.get('token')){
          this.$router.push(value);
        }else{
          this.$message.error('请先登录，在完成后续操作');
          this.$router.push('/login');
        }
      },
    }
  }
</script>

<style lang="stylus" scoped>
@import "../../stylus/color.styl"

  .my-main-box{
    max-width 600px!important
    width 100%
    margin 0 auto
  }
  .my-header-box{
    line-height 60px
    height 60px
  }
  .my-header-img{
    width 50px
    height 50px
    border-radius 25px
    border 1px solid $color-border
  }
  .my-header-username{
    font-size 18px
    display inline-block
    vertical-align top
    color $color-title
    margin-left 8px
  }
  .my-card-ul{
    margin 0
    padding 0
    list-style none
  }
  .my-card-li{
    position relative
    padding 15px 0 8px 15px
    font-size 15px
    color $color-content
    cursor pointer
  }
  .my-card-li:hover{
    color $color-background
    background-color $color-main
  }
  .el-icon-arrow-right{
    position absolute
    right 8px
    color $color-gray
  }



  //字体图标
  .iconfont{
    margin-right 3px
  }
  .icon-zhuye{
    font-size 19px
    margin-right -1px
  }
  .icon-xiangce{
    font-size 15px
  }
  .icon-favour-full{
    font-size 16px
  }
  .icon-tuichu{
    font-size 16px
  }
</style>
